<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Methods Option 方法选项</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Methods Option 方法选项</h1>
<hr>
<div id="app">
    {{count}}
    <div><button @click="add(2)">内部按钮</button></div>
    <br>
    <!--在vue作用域内，使用.native获取方法-->
    <btn @click.native="add(3)"></btn>
</div>
<br>
<!--在vue作用域外，直接通过实例名.方法获取-->
<button onclick="app.add(0.5)">外部按钮</button>
<script type="text/javascript">
    //自定义组件
    Vue.component('btn',{
      template:`<div><button>组件按钮</button></div>`
    })
    var app = new Vue({
      el:'#app',
      data:{
        count:1
      },
      methods:{
        //方法参数还有一个event参数，可以获取鼠标事件
        add(num){
          if(num ==''){
            this.count++
          }else {
            this.count +=num
          }
        }
      }
    })
</script>
</body>
</html>